<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
    <meta name="renderer" content="webkit">
    <!--国产浏览器高速模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="穷在闹市"/>
    <!-- 作者 -->
    <meta name="revised" content="穷在闹市.v3, 2019/05/01"/>
    <!-- 定义页面的最新版本 -->
    <meta name="description" content="网站简介"/>
    <!-- 网站简介 -->
    <meta name="keywords" content="搜索关键字，以半角英文逗号隔开"/>
    <title>穷在闹市出品</title>

    <!-- 公共样式 开始 -->
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css">
    <script type="text/javascript" src="../../framework/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script src="../../framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
    <!-- 公共样式 结束 -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <style>
        .layui-form-label {
            width: 100px;
        }

        .layui-input-block {
            margin-left: 130px;
        }
    </style>

</head>

<body>
<div class="cBody">
    <form id="addForm" class="layui-form" action="GoodServiet?action=update" method="post">
     <div class="layui-form-item">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-block">
               <input type="text" name="id" value="${goods.id}" readonly="readonly" required lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
       
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" value="${goods.name}" required lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">商品图片</label>
            <div class="layui-upload-drag"  id="goodsPic">
            <input type="hidden" id="upload" name="img"/>
           
                <i class="layui-icon"></i>
                <p>点击上传，或将文件拖拽到此处</p>
               <hr>
               <div  id="uploadDemoView">
             <img src="upload/${goods.img}" alt="上传成功后渲染" style="max-width: 196px">
            </div>
        </div>
       </div>
       
       <div class="layui-form-item">
            <label class="layui-form-label">参考价格</label>
            <div class="layui-input-block">
                <input type="text" name="price" value="${goods.price}" required lay-verify="required|number" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">商品数量</label>
            <div class="layui-input-block">
                <input type="text" name="number" value="${goods.number}" autocomplete="off" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">商品库存</label>
            <div class="layui-input-block">
                <input type="text" name="volume" value="${goods.ovlum}" autocomplete="off" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-inline">
                <select name="tname" id="provid" lay-filter="provid">
                    
                </select>
            </div>
        </div>
        
       
       <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
            <c:if test="${goods.status==0}">
                <input checked="checked" type="radio" name="status" value="0" title="启用">
                <input  type="radio" name="status" value="1" title="禁用">
            </c:if>
            
            <c:if test="${goods.status==1}">
                <input  type="radio" name="status" value="0" title="启用">
                <input checked="checked"  type="radio" name="status" value="1" title="禁用" >
            </c:if>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submitBut">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>


    <script>
    
        layui.use(['upload', 'form'], function () {
            var form = layui.form;
            var upload = layui.upload;
            var layer = layui.layer;
            //监听提交
            //解决了layui.open弹窗从内部关闭这个弹窗的问题
            form.on('submit(submitBut)', function (data) {
                var updateFrame = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(updateFrame);  //再改变当前层的标题
            });
            
            $.ajax({
  			  url:"GoodServiet?action=ajax",
  			  type:"POST",
  				success: function (date) {
  					console.log(date);
  					var js = JSON.parse(date);
  					var html="";
  					for(var i=0;i<js.length;i++){
  						html+="<option value="+js[i].id+">"+js[i].name+"</option>"
  					}
  					console.log(js);
  					$("#provid").html(html);
  					form.render("select");
  				}
  			 });
           
            form.verify({
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                ZHCheck: [
                    /^[\u0391-\uFFE5]+$/
                    , '只允许输入中文'
                ]
            });
            //拖拽上传
            upload.render({
                elem: '#goodsPic',
                url: 'GoodServiet?action=upload',
                done: function (res) {
                    console.log(res)
                    console.log(res.imgname);
                    $("#upload").val(res.data);
                    layui.$("#uploadDemoView").removeClass('layui-hide').find('img').attr('src', "upload/"+res.data);
                }
            });
        });
    </script>

</div>

</body>
</html>